<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<style type="text/css">
			#father {
				width: 600px;
				height: 500px;
				background-color: rgb(226, 117, 184);
				position: relative;
				left: 200px;
				top: 200px;
				transform: scale(0.7201, 0.669);
			}

			#box {
				width: 100px;
				height: 100px;
				background-color: aquamarine;
				position: absolute;
			}

			img {
				width: 100%;
				height: 100%;
				cursor: move;
			}

			#scale {
				width: 10px;
				height: 10px;
				overflow: hidden;
				cursor: se-resize;
				position: absolute;
				right: 0;
				bottom: 0;
				background-color: rgb(122, 191, 238);
			}
		</style>

	</head>
	<body>
		<div id="father">
			<div id="box">
				<img src="img/test.jpg" />
				<div id="scale"></div>
			</div>
		</div>
		<script type="text/javascript">
			// box是装图片的容器,fa是图片移动缩放的范围,scale是控制缩放的小图标
			var box = document.getElementById("box");
			var fa = document.getElementById('father');
			var scale = document.getElementById("scale");
			// 图片移动效果
			box.onmousedown = function(ev) {
				var oEvent = ev;
				// 浏览器有一些图片的默认事件,这里要阻止
				oEvent.preventDefault();
				//alert(oEvent.clientX);
				//alert(box.offsetLeft);
				var disX = oEvent.clientX - box.offsetLeft;
				var disY = oEvent.clientY - box.offsetTop;
				fa.onmousemove = function(ev) {
					oEvent = ev;
					oEvent.preventDefault();
					var x = oEvent.clientX - disX;
					var y = oEvent.clientY - disY;

					// 图形移动的边界判断
					x = x <= 0 ? 0 : x;
					x = x >= fa.offsetWidth - box.offsetWidth ? fa.offsetWidth - box.offsetWidth : x;
					y = y <= 0 ? 0 : y;
					y = y >= fa.offsetHeight - box.offsetHeight ? fa.offsetHeight - box.offsetHeight : y;
					box.style.left = x + 'px';
					box.style.top = y + 'px';
				}
				// 图形移出父盒子取消移动事件,防止移动过快触发鼠标移出事件,导致鼠标弹起事件失效
				fa.onmouseleave = function() {
					fa.onmousemove = null;
					fa.onmouseup = null;
				}
				// 鼠标弹起后停止移动
				fa.onmouseup = function() {
					fa.onmousemove = null;
					fa.onmouseup = null;
				}
			}
			// 图片缩放效果
			scale.onmousedown = function(e) {
				// 阻止冒泡,避免缩放时触发移动事件
				e.stopPropagation();
				e.preventDefault();
				var pos = {
					'w': box.offsetWidth,
					'h': box.offsetHeight,
					'x': e.clientX,
					'y': e.clientY
				};
				//alert(JSON.stringify(pos));
				fa.onmousemove = function(ev) {
					ev.preventDefault();
					// 设置图片的最小缩放为30*30
					var w = Math.max(30, ev.clientX - pos.x + pos.w)
					var h = Math.max(30, ev.clientY - pos.y + pos.h)
					// console.log(w,h)

					// 设置图片的最大宽高
					w = w >= fa.offsetWidth - box.offsetLeft ? fa.offsetWidth - box.offsetLeft : w
					h = h >= fa.offsetHeight - box.offsetTop ? fa.offsetHeight - box.offsetTop : h
					box.style.width = w + 'px';
					box.style.height = h + 'px';
					// console.log(box.offsetWidth,box.offsetHeight)
				}
				fa.onmouseleave = function() {
					fa.onmousemove = null;
					fa.onmouseup = null;
				}
				fa.onmouseup = function() {
					fa.onmousemove = null;
					fa.onmouseup = null;
				}
			}
		</script>
	</body>
</html>
